<template>
  <div class="content">
    <div class="content-layout">
      <div class="content-layout-left">
        <div class="layout-item">
          <span class="span-btn">>></span>
        </div>
      </div>
      <div class="content-layout-middle">
        <span class="span-btn">收藏</span>
      </div>
      <div class="content-layout-right"></div>
    </div>
    <div class="content-body pad-0 flex-row">
      <!-- 左侧 -->
      <div class="lefttreeview flex-col">
        <div class="tabbar-base">
          <div
            class="tabbar-item flex1"
            :class="leftIndexTab == item.index ? 'tabbar-selected' : ''"
            v-for="(item, index) in leftTab"
            :key="index"
            @click="leftIndexTab = item.index"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- 这里用子组件 -->
        <div class="metatree">
          <data-model-tree v-show="leftIndexTab == 0"></data-model-tree>
          <data-source-tree v-show="leftIndexTab == 1"></data-source-tree>
        </div>
      </div>

      <div class="flexlayoutsplit-line"></div>
      <!-- 右侧 -->
      <div class="metafilesbook-base flex-col">
        <div class="tabbar-base">
          <div class="tabbar-item">订单表</div>
        </div>
        <div class="metatree">
          <data-content></data-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DataModelTree from "./dataModelTree.vue";
import DataSourceTree from "./dataSourceTree.vue";
import DataContent from "./dataContent.vue";

// 左边Tab
const leftTab = ref([
  {
    index: 0,
    label: "模型",
  },
  {
    index: 1,
    label: "数据源",
  },
]);
// 左边活跃的tab标签
let leftIndexTab = ref(0);
</script>

<style scoped lang="scss">
.pad-0 {
  padding: 0px;
}

.lefttreeview {
  width: 300px;
  height: 100%;
  // background-color: blanchedalmond;
}
.flexlayoutsplit-line {
  width: 1px;
  height: 100%;
  background: #d2d2d2;
  cursor: col-resize;
  padding: 0 1px;
}
.metafilesbook-base {
  flex: 1;
  // background-color: aqua;
  height: 100%;
}
.metatree {
  flex: 1;
  overflow-y: auto;
}
.tabbar-base {
  height: 28px;
  width: 100%;
  display: flex;
  flex-shrink: 0;
  border-bottom: none;
  background-color: #f0f0f0;

  .tabbar-item {
    cursor: default;
    height: 100%;
    padding: 0px 10px;
    vertical-align: top;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    border-right: 1px solid #d4d5d4;

    &-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
    }
  }
  .tabbar-selected {
    background-color: #fff;
    border-bottom: none;
    padding-bottom: 1px;

    .tabbar-item-text {
      color: #000;
      font-weight: 700;
    }
  }
}
.list-header {
  height: 43px;
  border-bottom: 1px solid #e8e8e8;
  padding: 0px 15px 0px 10px;
  font-size: 13px;
  font-weight: 700;
}
</style>
